<template>
  <div class="address-list-content">
    <van-radio-group v-model="defaultId"
                     v-if="address_list.length>0"
                     :max="1"
                     @change="onDefault">
      <!-- 地址列表 -->
      <div class="list">
        <div class="address-item"
             v-for="item in address_list"
             :key="item.address_id">
          <div class="user-info flex align-baseline">
            <span class="user-name">{{ item.address_realname }}</span>
            <span class="user-phone">{{ item.address_mob_phone }}</span>
          </div>
          <div class="address-detail">
            {{item.area_info}}{{item.address_detail}}
          </div>

          <!-- 收货地址操作 -->
          <div class="address-handle flex justify-between align-center">
            <van-radio checked-color="#f5ac67"
                       :name="item.address_id">设为默认地址</van-radio>
            <div class="btn-group">
              <van-button class="btn-item"
                          @click="onDelete(item.address_id)">删除</van-button>
              <van-button class="btn-item edit-btn"
                          @click="onEdit(item.address_id)">编辑</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-radio-group>

    <!-- 列表为空 -->
    <div class="empty"
         v-else>
      <!-- 地址为空 -->
      <empty-data :icon="require('@/assets/image/empty-icon-1.png')"
                  empty-desc="暂无收货地址，快去添加一个把"></empty-data>
    </div>

    <!-- 底部添加按钮 -->
    <div class="footer">
      <van-button class="fixed-footer"
                  @click="goAdd">新增收货地址</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getAddressList, delAddress, editAddress } from '@/api/memberAddress'
import EmptyData from '@/components/EmptyData'
export default {
  components: {
    EmptyData
  },
  name: 'MemberAddressList',
  data() {
    return {
      address_list: [],
      defaultId: -1 // 默认地址的ID
    }
  },

  created: function() {
    this.getAddressList()
  },
  methods: {
    goAdd() {
      this.$router.push({ name: 'AddressForm', query: { action: 'add' } })
    },

    /**
     * 修改默认地址
     */
    onDefault(id) {
      var addrInfo = {}
      this.address_list.some((item, index) => {
        if (item.address_id === id) {
          item.address_is_default = 1
          addrInfo = item
          return true
        }
      })
      editAddress(addrInfo, addrInfo.address_id).then(
        response => {
          this.$toast({
            type: 'success',
            message: response.message || '设置成功'
          })
        },
        error => {
          this.getAddressList()
          this.$toast({
            type: 'fail',
            message: error.message
          })
        }
      )
    },

    // 点击编辑
    onEdit(addressId) {
      this.$router.push({
        name: 'AddressForm',
        query: { address_id: addressId }
      })
    },

    /**
     * 删除地址
     */
    onDelete(addressId) {
      Dialog.confirm({
        message: '确定要删除该地址吗？'
      })
        .then(() => {
          delAddress(addressId).then(
            response => {
              this.getAddressList()
            },
            error => {
              Toast(error.message)
            }
          )
        })
        .catch(() => {
          // on cancel
        })
    },

    getAddressList() {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中'
      })
      getAddressList()
        .then(res => {
          Toast.clear()
          this.address_list = res.result.address_list
          res.result.address_list.some(item => {
            if (item.address_is_default === '1') {
              this.defaultId = item.address_id
              return true
            }
          })
        })
        .catch(function(error) {
          Toast(error.message)
        })
    }
  }
}
</script>
<style lang="scss">
.address-list-content {
  .address-item {
    margin-top: 1px;
    background-color: #ffffff;
    padding: 15px 10px 0 15px;
    .user-info {
      margin-bottom: 10px;
      .user-name {
        color: #333333;
        font-size: 16px;
        margin-right: 5px;
        font-weight: 500;
      }
      .user-phone {
        color: #666666;
        font-size: 13px;
      }
    }
    .address-detail {
      color: #333333;
      font-size: 14px;
      padding-bottom: 14px;
      position: relative;
      &::after {
        width: 100%;
        height: 1px;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        transform: scaleY(0.5);
        background-color: #cccccc;
      }
    }
  }

  .address-handle {
    height: 50px;
    font-size: 12px;
    color: #666666;
    .btn-item {
      margin-left: 10px;
      width: 55px;
      height: 25px;
      line-height: 25px;
      padding: 0;
      border-radius: 5px;
      font-size: 12px;
      color: #999999;
    }
    .edit-btn {
      background-color: $mainColor;
      color: #ffffff;
    }
  }
  .empty {
    height: 80vh;
  }

  .footer {
    width: 100%;
    height: 45px;
    .fixed-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 45px;
      line-height: 45px;
      background-color: $mainColor;
      color: #ffffff;
    }
  }
}
</style>
